<template>
	<div class="warp" :style="{height:height+'px'}">
		<div class="header" ref="header">首页<span class="nav" @click="active = !active"></span></div>
		<div class="navlist" :class="{'navliston':active}">
			<p v-if="!user.logined"><router-link to="/login">登录</router-link></p>
			<p class="on"><router-link :to="{name:'familyHall',params:{eng_name:eng_name}}">首页</router-link></p>
			<p><router-link :to="{name:'FamilyHall1MoreList',params:{eng_name:eng_name,type:'all'}}">全部课程</router-link></p>
			<p><router-link :to="{name:'FamilyHall1MoreList',params:{eng_name:eng_name,type:'password'}}">精品课程</router-link></p>
		</div>
		<div class="video-box" ref="videoBoX">
			<div class="no-live" v-if="!roomLive">
				直播未开始
			</div>
			<template v-else>

			</template>
		</div>
		<div class="layout_main" :style="{height:layoutHeight+'px'}">
			<div class="videolist">
				<ul>
					<li v-for="(item,index) in teamHallPlans" :key="index" :class="{'on':isLive(item.start_time) && item.selected}">
						<div class="title">
							<span class="time">{{item.start_time}}</span>
							<span class="name">{{item.name}}</span>
							<span class="status" v-if="isLive(item.start_time)">即将开始</span>
							<span class="status" v-else>即将开始</span>
						</div>
						<div class="pic">
							<router-link :to="{name:'room',params:{eng_name:eng_name,roomid: String(item.room_id)}}">
								<span>正在直播</span>
								<b>进入直播间</b>
								<img :src="'http://img.uvod.cn/'+item.img"/>
							</router-link>
						</div>
					</li>
				</ul>
			</div>
		</div>
		<bind-tips></bind-tips>
	</div>
</template>

<script>
	import {hallInitRoomVideo,hallInitRoomChat,teamHallPlans} from '@/api/hall'
	import {MSG_TOKEN_INFO} from '@/utils/xchatMessageHandle'
	import {mapGetters} from 'vuex'
	import Xchat from '@/utils/xMessager/chat/Xchat'
	import XchatPlayer from '@/utils/xMessager/player/mobile/fullScreenPlayer'
	import {Base64} from '@/utils/xchat/base64'
	import mixin from '@/mixins/removeLoading'
	import bindTips from '@/views/bind_phone'
	export default{
		name:'familyHallTemplate0',
		mixins: [mixin],
		data(){
			return{
				active:false,
				loading:false,
				height:undefined,
				layoutHeight:undefined,
				teamHallPlans:[],
				userpara:null,
				fullScreenPlayer: null,
				chat:null
			}
		},
		props:{
			eng_name:{
				type:String
			}
		},
		components:{
			bindTips
		},
		computed:{
			...mapGetters([
			  'user',
				'token',
				'roomLive'
			])
		},
		created(){
			Promise.all([hallInitRoomVideo({eng_name:this.eng_name}),hallInitRoomChat({eng_name:this.eng_name})]).then(result=>{
				let wsres = result[1]
				let videores = result[0]
				//聊天start
				let userpara = JSON.parse(Base64.decode(wsres.data.appdata))
				this.userpara = userpara
				let ws_param = {
					ip : wsres.data.chat_server_ip,		//"192.168.0.120",
					port : 19288,	//roompara.serverpo
					uid : parseInt(wsres.data.uid),
					room_id : wsres.data.room_id,
					level : wsres.data.levelinroom,
					token : wsres.data.chat_token,
					nickname : Base64.decode(userpara.nickname_b64),
					chatdisable : 0,
					appdata : Base64.encode(JSON.stringify(userpara)),
					wss: userpara.wss,
				}
				this.$store.commit('SET_ROOMLIVE',videores.data.is_live)
				this.$store.commit('SET_ROOMCHANGE',!videores.data.is_live)
				//聊天服务器
				new Xchat(ws_param).then(chat=>{
					this.chat = chat
					this.chatEvents()
				})
				//聊天end
				this.$nextTick(()=>{
					if(videores.data.watch_server && videores.data.is_live){
						this.initPlayer(videores.data.watch_server).then(player=>{
							this.fullScreenPlayer = player
							this.playerEvents()
						})
					}
				})
			})
			teamHallPlans({eng_name:this.eng_name}).then(res=>{
				this.teamHallPlans = res.data
			}).catch(err=>{
				console.log(err)
			})
		},
		methods:{
			initPlayer(watchServer){
				let video_param = {
					el:'fullscreen-player-wrap',
					watchServer:watchServer,
					mode:1
				}
				return new XchatPlayer(video_param)
			},
			destroyPlayer(){
				if(this.fullScreenPlayer){
					this.fullScreenPlayer.destroy()
				}
				this.fullScreenPlayer = null
			},
			caculateHeight(){
				this.layoutHeight = window.innerHeight  - this.$refs.videoBoX.getBoundingClientRect().height - this.$refs.header.getBoundingClientRect().height
			},
			isLive(beginTime) {
				var strb = beginTime.split (":");
				if (strb.length != 2) {
						return false;
				}
				var b = new Date ();
				var n = new Date ();
				b.setHours (strb[0]);
				b.setMinutes (strb[1]);
				if (n.getTime () - b.getTime () > 0) {
						return true;
				} else {
						return false;
				}
			},
			chatEvents(){
				this.chat.on(this.chat.chatEvents.MSG_TOKEN_INFO,(param)=>{
					MSG_TOKEN_INFO(param,{chat:this.chat,player:this.fullScreenPlayer,xmessager:this.userpara,store:this.$store})
				})
				this.chat.on(this.chat.chatEvents.SHANGMAI,({url_data,mictime})=>{
					this.initPlayer(url_data).then(player=>{
						this.fullScreenPlayer = player
						this.fullScreenPlayer.mictime = mictime
						this.playerEvents()
					})
				})
				this.chat.on(this.chat.chatEvents.XIAMAI,()=>{
					this.offPlayerEvents()
					this.destroyPlayer()
				})
			},
			offChatEvents(){
				this.chat.off(this.chat.chatEvents.MSG_TOKEN_INFO,(param)=>{
					MSG_TOKEN_INFO(param,{chat:this.chat,player:this.fullScreenPlayer,xmessager:this.userpara,store:this.$store})
				})
			},
			playerEvents(){
				this.fullScreenPlayer.on(this.fullScreenPlayer.playerEvents.NATIVE_PLAYER_PLAY,()=>{
					this.hasPlaying = true
					if(isAndroid){
						setTimeout(()=>{
							this.caculateHeight()
						},500)
					}
				})
			},
			offPlayerEvents(){
				this.fullScreenPlayer.off(this.fullScreenPlayer.playerEvents.NATIVE_PLAYER_PLAY,()=>{
					this.hasPlaying = false
					if(isAndroid){
						setTimeout(()=>{
							this.caculateHeight()
						},500)
					}
				})
			},
		},
		mounted(){
			this.height = window.innerHeight
			this.caculateHeight()
		},
		destroyed(){
			if(this.fullScreenPlayer){
				this.offPlayerEvents()
			}
			if(this.chat){
				this.offChatEvents()
			}
			this.fullScreenPlayer = null
			this.chat = null
			this.userpara = null
		}
	}
</script>

<style scoped>
	@import url("../../../styles/familyHallCommon.css");
	.videolist li { border-bottom: 1px solid #ddd; }
	.videolist li .title { position: relative; height: 60px; line-height: 60px; color: #222; background: #fff; font-size: 14px; }
	.videolist li .title .time { position: absolute; left: 0; top: 0; width: 80px; text-align: right; color: #666;  }
	.videolist li .title .time:after { position: absolute; width: 14px; height: 14px; content: ''; left:28px; top:23px; background: url(./images/time2.png) no-repeat; background-size: cover; }
	.videolist li .title .name { display: block; padding: 0 80px; height: 60px; overflow: hidden; white-space: nowrap;text-overflow: ellipsis; text-align: center; }
	.videolist li .title .status { position: absolute; right: 10px; top: 18px; height: 24px; line-height: 24px; width: 66px; background: #999; border-radius: 10px; color: #fff; text-align: center; font-size: 12px; }
	.videolist li .pic { display: none; position: relative; height: 180px; background: url(./images/vbg.png) no-repeat; background-size: cover; font-size: 12px;}
	.videolist li .pic a{display: block;height: 100%;}
	.videolist li .pic span { position: absolute; width: 66px; height: 24px; line-height: 24px; background: #e94e3a; color: #fff; text-align: center; border-radius: 10px; left: 10px; top: 10px; z-index: 2; }
	.videolist li .pic b { position: absolute; width: 80px; height: 30px; line-height: 30px; left: 50%; top: 76px; margin-left: -40px; text-align: center; background: rgba(0,0,0,.7); color: #fff; border-radius: 20px; z-index: 2; }
	.videolist li .pic img { position: absolute; left: 0; bottom: 0; max-width: 100%; max-height: 100%; }
	.videolist li.on .title { background: #e94e3a; color: #fff; }
	.videolist li.on .title .time { color: #fff; }
	.videolist li.on .pic { display: block; }
	.videolist li.on .title .status { background: #fff; color: #e94e3a; }
	.videolist li.on { border-bottom: 0 none; }
	.no-live:after {position: absolute; width: 143px; height: 110px; content:''; left: 0; top: 0; background: url(./images/shaohou.png) no-repeat; background-size: cover; }
</style>
